<template>
    <div class="container">
        <view class="block-shadow">
            <uni-list>
                <block v-for="(item,index) in settingsData" :key="index">
                            <uni-list-item
                                v-if="item.code!='modify' || item.code=='modify' && useGesture"
                                @switchChange="checkboxChange"
                                :show-switch="item.switch"
                                :title="item.title"
                                :rightLabel="item.rightLabel"
                                :switch-checked="item.checked"
                                :show-arrow="item.showArrow"
                                @click="tapEvent(item)"
                                :thumb="item.thumb">
                                    <view slot="content" class="content">
                                        <view class="left">{{item.title}}</view>
                                        <view class="right">{{item.rightLabel}}</view>
                                    </view>
                        </uni-list-item>
                </block>
            </uni-list>
        </view>
    </div>
</template>

<script>
    import {isEmpty, resetState,isPromise} from '@/utils/index';
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex';
    import mixins from '@/mixins/index';
    import {uniList} from '@dcloudio/uni-ui';
    import uniListItem from '@/components/common/uni-list-item/index'
    export default {
        mixins: [mixins],
        data() {
            return {
            };
        },
        components:{
            uniList,uniListItem,
        },
        watch: {},
        computed:{
//            ...mapState({
//                network:state=>state.settings.network
//            }),
            ...mapGetters(
                {
                    getVersion:'settings/getVersion',
                }
            ),
//            permitPlayVideoInWifi(){
//                return this.network.permitPlayVideoInWifi;
//            },
            getVersionNum()
            {
                return this.getVersion.code;
            },
            useGesture(){
                return this.userDataForLogin.useGesture;
            },
            settingsData() {
                const dd =  [
                    // {
                    //     code:'feedback',
                    //     thumb:'/static/img/mine/setting-icon1.png',
                    //     title:'意见反馈',
                    //     // route:'/pages/system/settings/feedback/index',
                    //     route:'/pages/nobuild/nobuild',
                    //     rightLabel:'',
                    //     showArrow:true
                    // },
                    {
                        code:'about',
                        thumb:'/static/img/mine/setting-icon2.png',
                        title:'关于',
                        rightLabel:'版本号'+this.getVersionNum,
                        showArrow:false
                    },
                    {
                        code:'on',
                        thumb:'/static/img/mine/setting-icon3.png',
                        title:'手势密码',
                        rightLabel:'',
                        // rightLabel:'版本号'+this.getVersionNum,
                        switch:true,
                        checked:this.useGesture,
                        showArrow:false
                    },
                    {
                        code:'modify',
                        thumb:'/static/img/mine/setting-icon4.png',
                        title:'手势修改',
                        rightLabel:'',
                        route:'/pages/system/gestureLock/gestureLock?purpose=set',
                        showArrow:true
                    }
                ]
                return dd;
            }
        },
        methods: {
            checkboxChange: function({value}) {
               //this.isChecked = value;
               /* 发起更新开启手势 */
                this.enableUseGesture({
                            useGesture:value
                        })
            },
            ...mapActions({
                //updateNetWork: 'settings/updateNetWork',
                getVersionCode: 'settings/getVersionCode',
                enableUseGesture:'user/enableUseGesture'
            }),
            tapEvent({code,route}){
                const $this = this;
                if(route!=undefined){
                    uni.navigateTo({
                        url:route
                    });
                    return;
                }
            },
//            switchChange(e) {
//                console.log('switchChange')
//                const $this = this;
//                if (e.value){
//                    $this.updateNetWork({permitPlayVideoInWifi:true});
////                    uni.showModal({
////                        title: '温馨提示',
////                        content: '运营商网络下观看会导致超额流量，确认开启？',
////                        success: function (res) {
////                            if (res.confirm) {
////                                console.log('用户点击确定');
////                                $this.updateNetWork({permitPlayVideoInWifi:true});
////                            } else if (res.cancel) {
////                                console.log('用户点击取消');
////                                $this.updateNetWork({permitPlayVideoInWifi:false});
////                            }
////                        }
////                    });
//                }else {
//
//                    $this.updateNetWork({permitPlayVideoInWifi:false});
//                    uni.showLoading({
//                        title: '设置关闭中',
//                        success:function () {
//                            setTimeout(function () {
//                                uni.hideLoading();
//                            }, 2000);
//                        }
//                    });
//                }
//            },
//            getCache(){
//                //#ifdef APP-PLUS
//                const $this = this;
//                plus.cache.calculate( function ( size ) {
//                    $this.cacheVolume = (size * 0.0009766 / 1024.0).toFixed(2);
//                });
//                //#endif
//            }
        },
        onReady(){
            //this.getCache();
        }
    }
</script>

<style lang="less" scoped>
    .container {
        width: 100%;
        height: 100%;
        border-top: 1px solid transparent;
    }
    .content{
        display:flex;
        justify-content:space-between
    }
    .content .left {
        flex: 1;
    }
    .content .right {
        min-width: 100upx;
        color: #a4a4a4;
    }
    .block-shadow {
        margin-top: 40upx;
    }
    .uni-list:before {
        content: none;
    }
    .uni-list:after {
        content: none;
    }
    .uni-list-item {
        padding: 0 20upx;
        &:last-child {
            .uni-list-item__container {
                &:after {
                    height: 0px;
                    content: '';
                }
            }
        }
    }
    .uni-list-item__container::after {
        content: '';
        left: 0;
    }
    .switch-box {
        .chk {
            display: none;
        }
    }
    .switch-box .switchoff{
        width: 100upx;
        height: 60upx;
        background-color: #9e9e9e;
        border-radius: 30upx;
        position: relative;
    }
    .switch-box .switchoff::before {
        content: '';
        width: 48upx;
        height: 48upx;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        left: 6upx;
        top: 6upx;
    }
    .switch-box .switch{
        width: 100upx;
        height: 60upx;
        background-color: #5ea1f8;
        border-radius: 30upx;
        position: relative;
    }
    .switch-box  .switch::before {
        content: '';
        width: 48upx;
        height: 48upx;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        left: 44upx;
        top: 6upx;
    }
</style>
